<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       过滤器:对要显示的数据进行特定格式化后再显示，并没有改变原本的数据，是产生新的对应数据

       <h2>显示格式化后的时间戳</h2>
       <h3>现在是{{Date.now()}}</h3>
       <hr>
       <!-- 过滤一下 -->
       <h3>现在是{{time | timeFilter}}</h3>

       <hr>
       <!-- 过滤器也能传参 -->
       <h2>两个参数分别是{{time | timeFilter2("啊")}}</h2>

       <!-- 过滤器还能加过滤器，过滤器的串联 -->
       <!-- {{time | filter1 | filter2}} -->

       <!-- 全局过滤器 -->
        <h3>全局过滤器{{20 | myFilter()}}</h3>
       <hr>

       <!-- 过滤器有两种玩法，一种是插值语法{{ 值 | 过滤器名}}，一种是v-bind,:绑定属性 = '值 | 过滤器名字' -->
    </div>
</body>
<script>
    // 写个全局过滤器,这个必须写在new Vue之前
    Vue.filter('myFilter',function(value){
        return '传进来的值是'+value
    })


    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
           time:1651136009288
        },
        // 这是局部过滤器
        filters:{
            timeFilter(value){
                // 会接受一个参数就是你传入的值，你return什么值，最后就是什么值
                    console.log(value)
                    return '你好'
            },
            timeFilter2(val,va){
                console.log(val,va)
                return val+'和'+va
            }
        }
        
    })

    
</script>
</html>